<template>
    <div class="page user-ui">
        <div class="head-box">
            <p>盟友头像</p>
            <img :src="ally.img">
        </div>
        <div class="post-box">
            <p>真实姓名</p>
            <input v-model="userInfo.realName" placeholder="请输入真实姓名"></input>
        </div>
        <div class="post-box">
            <p>性别</p>
            <cube-radio-group v-model="selected" :options="options" />
        </div>
        <div class="post-box">
            <p>出生日期</p>
            <span @click="showDatePicker">{{userInfo.birthday}}</span>
        </div>
        <div class="post-box">
            <p>身份证号</p>
            <input v-model="userInfo.idNumber" placeholder="请输入身份证号码"></input>
        </div>
        <div class="post-box">
            <p>手机号码</p>
            <input v-model="userInfo.phone" placeholder="请输入手机号码"></input>
        </div>
        <div class="addr-box">
            <p>通讯地址</p>
            <textarea
                    v-model="userInfo.address"
                    :placeholder="placeholder"
            ></textarea>
        </div>
        <cube-button @click="submitTap()">保存</cube-button>
    </div>
</template>
<script>
    import { getUserInfo, upDataUserInfo } from '../../api/mine'
    export default {
        data() {
            return {
                userInfo: {
                    realName: null,
                    idNumber: null,
                    phone: null,
                    address: "",
                    birthday: "年/月/日",
                },
                placeholder: "请输入通讯地址",
                selected: '',
                options: ['男', '女'],
                ally: {
                    id: 1,
                    img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544437954356&di=5cb5fd9390704eea4ad2369d3ed8f263&imgtype=0&src=http%3A%2F%2Fc4.haibao.cn%2Fimg%2F600_0_100_0%2F1515049492.1807%2Fe94fbb9278456d36506114cc0222f059.jpg"
                }
            }
        },
        created() {
            getUserInfo().then(res=> {
                if (res.data.sex == 1) {
                    this.selected = '男'
                }  else {
                    this.selected = '女'
                }
                this.userInfo = res.data
            })
        },
        methods: {
            showDatePicker() {
                if (!this.datePicker) {
                    this.datePicker = this.$createDatePicker({
                        title: 'Date Picker',
                        min: new Date(2008, 7, 8),
                        max: new Date(2020, 9, 20),
                        value: new Date(),
                        onSelect: this.selectHandle,
                        onCancel: this.cancelHandle
                    })
                }
                this.datePicker.show()
            },
            selectHandle(date, selectedVal, selectedText) {
                if (selectedVal[1] < 10) {
                    selectedVal[1] = '0' + selectedVal[1]
                }
                if (selectedVal[2] < 10) {
                    selectedVal[2] = '0' + selectedVal[2]
                }
                this.userInfo.birthday = selectedVal[0].toString() + '-' + selectedVal[1].toString() + '-' + selectedVal[2].toString()
                console.log(date,selectedVal[1],selectedText)
                this.$createToast({
                    type: 'correct',
                    txt: '选择成功',
                    time: 1000
                }).show()
            },
            cancelHandle() {
                this.$createToast({
                    type: 'correct',
                    txt: 'Picker canceled',
                    time: 1000
                }).show()
            },
            submitTap: function () {
                console.log(this.userInfo.realName)
                console.log(this.selected)
                console.log(this.userInfo.birthday)
                console.log(this.userInfo.idNumber)
                console.log(this.userInfo.phone)
                console.log(this.userInfo.address)
                let sex = null
                if (this.selected == '男') {
                    sex = 1
                } else {
                    sex = 2
                }
                upDataUserInfo(sex, this.userInfo.phone, this.userInfo.realName, this.userInfo.idNumber, this.userInfo.birthday, this.userInfo.address).then(res=> {
                    console.log(res)
                })
            }
        }
    }
</script>
<style type="text/stylus" lang="stylus">
    .user-ui
        .cube-radio
            padding 0
        .cube-radio-group
            display flex
        .cube-radio_selected
            .cube-radio-ui
                background #5677fc
        .cube-radio-wrap
            margin-right 0.6rem
            span
                color #BBBBBB
        .cube-textarea_expanded
            height 90%
            width 60%
        .cube-btn
            width 24%
            height 0.75rem
            background #42A7BD
            text-align center
            line-height 0.75rem
            padding 0
            color #FFF
            margin 1.6rem auto
</style>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 92%
        padding 0 4%
        height 100%
        background #FFF
        padding-bottom 1.43rem
        .head-box
            width 100%
            height 2.71rem
            display flex
            justify-content space-between
            align-items center
            border-bottom 1px #eee solid
            color #327A8A
            font-size 0.4rem
            img
                width 1.6rem
                height 1.6rem
                border-radius 50%
                margin-right 0.7rem
        .post-box
            width 100%
            height 1.16rem
            display flex
            justify-content start
            align-items center
            font-size 0.4rem
            border-bottom 1px #eee solid
            p
                width 34%
                font-weight 500
                color #327A8A
            span
                color #BBBBBB
            input
                border 1px #fff solid
                padding 0 0.2rem
                font-size 0.32rem
                color #BBBBBB

        .addr-box
            width 100%
            height 1.85rem
            display flex
            justify-content start
            align-items center
            font-size 0.4rem
            border-bottom 1px #eee solid
            p
                width 34%
                font-weight 500
                color #327A8A
            textarea
                border none
                font-size 0.32rem
                color #BBBBBB
</style>
